<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery contextMenu</title>

    <link href='https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic|Roboto+Slab:400,700|Inconsolata:400,700&subset=latin,cyrillic'
          rel='stylesheet' type='text/css'>

    <link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/screen.css" type="text/css"/>
    <link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme.css" type="text/css"/>
    <link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme-fixes.css" type="text/css"/>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
    <link href="../../../dist/jquery.contextMenu.css" rel="stylesheet" type="text/css" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
    <script src="../../../src/jquery.contextMenu.js" type="text/javascript"></script>

    <script src="../../../dist/jquery.ui.position.min.js" type="text/javascript"></script>

    <script src="https://swisnl.github.io/jQuery-contextMenu/js/main.js" type="text/javascript"></script>

    <script type="text/javascript">
        var _gaq = _gaq || [];
        _gaq.push(['_setAccount', 'UA-66438984-1']);
        _gaq.push(['_trackPageview']);

        (function() {
            var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
            ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
            var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
        })();
    </script>

</head>
<body class="wy-body-for-nav">

<div class="wy-grid-for-nav">



    <nav data-toggle="wy-nav-shift" class="wy-nav-side">
        <div class="wy-side-nav-search">
            <a href="https://swisnl.github.io/jQuery-contextMenu/"> jQuery contextMenu</a>
        </div>

        <div class="wy-menu wy-menu-vertical" data-spy="affix" role="navigation" aria-label="main navigation">
            <ul>
                                    <li class="toctree-l1 ">
                        <a class="reference internal "
                           href="https://swisnl.github.io/jQuery-contextMenu//">
                            Introduction
                        </a>
                                                    <ul>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://www.swis.nl/over-ons/bjorn-brala">
                                            Author
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo.html">
                                            Demo
                                        </a>
                                    </li>
                                                            </ul>
                                            </li>
                                    <li class="toctree-l1 ">
                        <a class="reference internal "
                           href="https://swisnl.github.io/jQuery-contextMenu/docs.html">
                            Documentation
                        </a>
                                                    <ul>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs.html">
                                            Options
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/items.html">
                                            Defining menu items
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/plugin-commands.html">
                                            Plugin commands
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/customize.html">
                                            Customize icons
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/fontawesome-icons.html">
                                            FontAwesome icons
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/font-awesome.html">
                                            Font Awesome support
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/runtime-options.html">
                                            Runtime options
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/custom-command-types.html">
                                            Custom command types
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/events.html">
                                            Events
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/docs/html5-polyfill.html">
                                            HTML5 polyfill
                                        </a>
                                    </li>
                                                            </ul>
                                            </li>
                                    <li class="toctree-l1 current">
                        <a class="reference internal "
                           href="https://swisnl.github.io/jQuery-contextMenu/demo.html">
                            Demo gallery
                        </a>
                                                    <ul>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo.html">
                                            Simple Context Menu
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/fontawesome-icons.html">
                                            FontAwesome icons
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/accesskeys.html">
                                            Accesskeys
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 current">
                                        <a class="reference internal current"
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/async-create.html">
                                            Create Context Menu (asynchronous)
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/callback.html">
                                            Command's action (callbacks)
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/custom-command.html">
                                            Custom Command Types
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled.html">
                                            Disabled Command
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled-callback.html">
                                            Disabled Callback Command
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled-changing.html">
                                            Changing Command's disabled status
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/disabled-menu.html">
                                            Disabled Menu
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/dynamic.html">
                                            Adding new Context Menu Triggers
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/dynamic-create.html">
                                            Create Context Menu on demand
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/html5-import.html">
                                            Importing HTML5 menu
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill.html">
                                            HTML5 polyfill
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/html5-polyfill-firefox8.html">
                                            HTML5 polyfill (Firefox)
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/input.html">
                                            Input Commands
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/keeping-contextmenu-open.html">
                                            Keeping the context menu open
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/menu-title.html">
                                            Menus with titles
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/on-dom-element.html">
                                            Context Menu on DOM Element
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/sub-menus.html">
                                            Submenus
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-custom.html">
                                            Custom Activated Context Menu
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-hover.html">
                                            Hover Activated Context Menu
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-hover-autohide.html">
                                            Hover Activated Context Menu With Autohide
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-left-click.html">
                                            Left-Click Trigger
                                        </a>
                                    </li>
                                                                    <li class="toctree-l2 ">
                                        <a class="reference internal "
                                           href="https://swisnl.github.io/jQuery-contextMenu/demo/trigger-swipe.html">
                                            Swipe Trigger
                                        </a>
                                    </li>
                                                            </ul>
                                            </li>
                            </ul>
            <div class="swis-branding">
                <span>Maintained by:</span>
                <a href="https://www.swis.nl"><img src="https://swisnl.github.io/jQuery-contextMenu/images/swis-logo.jpg" class="swis-logo">Creative Digital Agency</a>
            </div>
        </div>
        &nbsp;
    </nav>

    <section data-toggle="wy-nav-shift" class="wy-nav-content-wrap">

                <nav class="wy-nav-top" role="navigation" aria-label="top navigation">
            <i data-toggle="wy-nav-top" class="fa fa-bars"></i>
            <a href="https://swisnl.github.io/jQuery-contextMenu/">jQuery contextMenu</a>
        </nav>


                <div class="wy-nav-content">
            <div class="rst-content">
                <div role="main" class="document">
                                        <a href="https://github.com/swisnl/jQuery-contextMenu" class="edit-on-github fa fa-github"> Fork on GitHub</a>
                    <h1 id="demo-create-context-menu-asynchronous">Demo: Create Context Menu (asynchronous)</h1>
<!-- START doctoc generated TOC please keep comment here to allow auto update -->
<!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
<ul>
<li><a href="#example-code">Example code</a></li>
<li><a href="#example-html">Example HTML</a></li>
</ul>
<!-- END doctoc generated TOC please keep comment here to allow auto update -->
<p><span class="context-menu-one btn btn-neutral">right click me</span></p>
<h2 id="example-code">Example code</h2>
<script type="text/javascript" class="showcase">
$(function(){
    // some build handler to call asynchronously
    function createSomeMenu() {
        return {
            callback: function(key, options) {
                var m = "clicked: " + key;
                window.console && console.log(m) || alert(m);
            },
            items: {
                "edit": {name: "Edit", icon: "edit"},
                "cut": {name: "Cut", icon: "cut"},
                "copy": {name: "Copy", icon: "copy"}
            }
        };
    }

    // some asynchronous click handler
    $('.context-menu-one').on('mouseup', function(e){
        var $this = $(this);
        // store a callback on the trigger
        $this.data('runCallbackThingie', createSomeMenu);
        var _offset = $this.offset(),
            position = {
                x: _offset.left + 10, 
                y: _offset.top + 10
            }
        // open the contextMenu asynchronously
        setTimeout(function(){ $this.contextMenu(position); }, 1000);
    });

    // setup context menu
    $.contextMenu({
        selector: '.context-menu-one',
        trigger: 'none',
        build: function($trigger, e) {
            e.preventDefault();

            // pull a callback from the trigger
            return $trigger.data('runCallbackThingie')();
        }
    });
});
</script>
<h2 id="example-html">Example HTML</h2>
<div style="display:none;" class="showcase" data-showcase-import=".context-menu-one"></div>
                </div>

                <footer>
                    <hr/>
                                            <div role="contentinfo">
                            <p>
                                Find jQuery contextMenu on <a href="https://github.com/swisnl/jQuery-contextMenu">GitHub</a>.
                            </p>
                        </div>
                                    </footer>

            </div>
        </div>

    </section>

</div>

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/js/theme.js"></script>

<script>
    $(function() {
        hljs.configure({
            tabReplace: '    ', // 4 spaces
        });
        hljs.initHighlightingOnLoad();
    });
</script>

</body>
</html>
